<template>
  <view class="scl-not-complete-tip-comp"
    :class="{'save-bottom':saveBottom}"
   v-show="true" @click.stop="confirmHandle">
    <view class="scl-not-complete-tip-comp-wrapper"
      :style="{ 'background-image': 'url('+staticImgs.bgD+')'}"
    >
      <view class="text">您有{{notCompleteSclNum}}个测评正在进行中</view>
      <view class="close-icon"  @click="hideComp">
        <image :src="staticImgs.closeIcon" mode=""></image>
      </view>
    </view>
  </view>
</template>

<script>
  export default{
    props:{
      saveBottom:{
        type:Boolean,
        default:true
      },
      notCompleteSclNum:{
        type:Number,
        default:0
      }
    },
    data(){
      return {
        staticImgs: {
          bgD: this.imgBaseURL + '/scl/scl_not_complete_tip_bg-1.png',
          closeIcon: this.imgBaseURL + '/scl/scl_not_complete_tip_close_icon.png',
        },
        showComp:true,
      }
    },
    methods:{
      confirmHandle(){
        this.$emit('confirm')
      },
      hideComp(){
        this.showComp = false
        this.$emit('hide')
      }
    },
  }
  
</script>

<style lang="scss" scoped>
  
  .scl-not-complete-tip-comp{
    position: fixed;
    z-index: 6;

    bottom:0;
    left: 0;
    right: 0;
    .scl-not-complete-tip-comp-wrapper{
      background-size: cover;
      margin: auto;
      
      width: 748rpx;
      height: 167rpx;
      
      display: flex;
      box-sizing: border-box;
      align-items: flex-end;
      justify-content: flex-end;
      padding-bottom: 74rpx;
      
      .text{
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #BC1637;
        line-height: 45rpx;
        text-align: left;
        font-style: normal;

      }
      .close-icon{
        
        margin-right: 24rpx;
        margin-left: 104rpx;
            padding-bottom: 10rpx;

        &,image{
          height: 40rpx;
          width: 40rpx;
        }
      }
    }
    
  }

  .save-bottom{
    bottom: calc(4rpx + constant(safe-area-inset-bottom));
    bottom: calc(4rpx + env(safe-area-inset-bottom));  
  }
</style>